<template>
    <div>
        <el-dialog
        title="选择用户角色"
        :visible.sync="dialogVisible"
        top="10vh"
        :close-on-click-modal="false"
        :before-close="handleClose"
        >
            <el-radio-group v-model="userGroupRole" @change="handleChange" fill="red">
                <el-radio border size="small" v-for="(item, index) in groupRoleList" :key= "index" :label="item">{{item.roleName}}</el-radio>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleCancel">取 消</el-button>
                <el-button size="small" type="primary" @click="handleClcikSure">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        props: ['isShow', 'groupRoleList', 'userAssignId'],
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            }
        },
        created() {
            
            if(this.userAssignId) {
                this.groupRoleList.forEach(item => {
                    if(item.roleId == this.userAssignId.roleId) {
                        this.userGroupRole= item
                    }
                })
            }else {
                this.userGroupRole= this.groupRoleList[0]
            }
        },
        
        data() {
            return {
                userGroupRole: null ,
                userPower: null,
                systemId: 1,
                loginGroup: null
            }
        },
        mounted() {
            if(this.userGroupRole) {
                this.getUserPower(this.systemId, this.userGroupRole.userAssignId)
            }
        },
        methods: {
            handleClose() {
                this.$confirm('确定关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch()
            },
            handleChange(val) {
                this.getUserPower(this.systemId , val.userAssignId)
                sessionStorage.setItem('userAssignId', val.userAssignId)
                sessionStorage.setItem('item', JSON.stringify(val))
                this.loginGroup= val
            },
            /**获取用户分组角色  v1*/
            async getUserPower(systemId, id) {
                await this.$server.loginAuthorityControlApi.getUserPower(systemId, id).then(res => {
                    if(res.data.length > 0 ) {
                        if(res.data[0].children && res.data[0].children.length > 0) {
                            res.data[0].children.forEach((item, index) => {
                                if(item.resourceCode == 'SYSTEM_1') {
                                    res.data[0].children.splice(index, 1)
                                    res.data[0].children.push(item)
                                }
                            })
                        }
                    }
                    this.userPower= res.data 
                })
            },

            handleClcikSure() {
                if(this.userGroupRole) {
                    this.$store.dispatch('userPowers', this.userPower)
                    this.$store.dispatch('loginGroup', this.loginGroup)
                    sessionStorage.setItem('roleName', this.loginGroup.roleName)
                    sessionStorage.setItem('roleName', this.loginGroup.roleName)
                    this.$emit('choseUserGroupRole', this.userPower)
                    this.$emit('cancelShow', false)
                
                }else {
                    this.$confirm('请选择用户身份')
                }
            },
            handleCancel() {
               // sessionStorage.clear()
                this.$emit('cancelShow', false)
            },
        }
    }
</script>
<style lang="less" scoped>
    .el-radio.is-bordered+.el-radio.is-bordered {
        margin-left: 0 !important;
        margin-bottom: 10px;
    }
</style>